<template>
    <div class="addapi">
        <div class="content">
            <div class="bt">api添加和修改</div>
            <el-form ref="form"  @submit.native.prevent :model="form" label-width="80px">
                <el-form-item label="类别：">
                    <el-select v-model="leibie" placeholder="请选择">
                      <el-option label="订单相关" value="0"></el-option>
                      <el-option label="物流相关" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="方式：">
                  <el-select v-model="fangshi" placeholder="请选择">
                    <el-option label="get" value="1"></el-option>
                    <el-option label="post" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名字：">
                  <el-input v-model="title"></el-input>
                </el-form-item>
                <el-form-item label="地址：">
                  <el-input v-model="url"></el-input>
                </el-form-item>
                <el-form-item label="参数：">
                  <el-table :data="canshus" border class="canshu">
                    <el-table-column label="参数名" width="200">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.name" class="kuandu"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="类型" width="150">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.type" filterable placeholder="请选择类型" >
                          <el-option label="字符串" value="字符串"></el-option>
                          <el-option label="整形" value="整形"></el-option>
                          <el-option label="文件" value="文件"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column  label="是否可为空" width="150">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.kong" placeholder="请选择">
                          <el-option label="可以" value="可以"></el-option>
                          <el-option label="不可以" value="不可以"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                          <el-button size="mini" type="danger" @click="shanchu(scope.$index, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button type="primary" @click="addcanshu" size="mini">添加参数</el-button>

                </el-form-item>
                <el-form-item label="内容：">
                    <div id="editor">

                    </div>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="go" @click="go">提交</el-button>
        </div>
    </div>
</template>

<script>
    import E from "wangeditor";
    import axios from "axios";

    export default {
        name: "addapi",
        data(){
            return{
              form:{},
              leibie:"",
              fangshi:"",
              title:"",
              url:"",
              canshus:[
                {name:'id',kong:'可以',type:'字符串'}
              ],
              content:"",
              editor:''
            }
        },
        created() {

        },
        mounted() {
          var that = this
          this.editor = new E('#editor');
          this.editor.customConfig.uploadImgServer = '/upload'
          this.editor.customConfig.showLinkImg = false
          this.editor.customConfig.onchange = function (html) {
            // that.shopform.description = html
          }
          this.editor.customConfig.customUploadImg = function (files, insert) {
            var formData = new FormData();
            formData.append("pic",files[0]);
            axios.post('/api/plan-market/order-page/upload-pic',formData)
              .then(response => {
                if(response.data.msg.code == 0){
                  insert(response.data.data)

                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          }
          this.editor.create();
        },
        methods:{
          addcanshu:function () {
            var canshu = {name:'',kong:'可以',type:'字符串'}
            this.canshus.push(canshu)
          },
          addcanshugo:function () {

          },
          shanchu:function (index,row) {
            this.canshus.splice(index,1);
          },
          go:function () {
            var that = this
            var data = {}
            data['leibie'] = this.leibie
            data['fangshi'] = this.fangshi
            data['title'] = this.title
            data['url'] = this.url
            data['canshus'] = this.canshus
            data['content'] = this.editor.txt.html();
            axios.post('/api/plan-market/api/addapi',data)
              .then(response => {
                if(response.data.msg.code == 0){
                  that.$message.success('发布成功了，再来一个吧！');
                  that.leibie = '',
                  that.fangshi = '',
                  that.title = '',
                  that.url = '',
                  that.canshus = [
                    {name:'id',kong:'可以',type:'字符串'}
                  ],
                  that.editor.txt.html('')
                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          }
        }
    }
</script>
<style>
    .addapi .w-e-text-container{ height: auto !important; min-height: 550px;}
    .addapi .w-e-text{ min-height: 550px;}
    .addapi .el-dialog__wrapper{ z-index: 10001 !important;}
    .addapi .el-table tr{ line-height: 25px !important;}
    .addapi .el-table th{ line-height: 25px !important;}
</style>
<style scoped lang="scss">
    .addapi{ width: 100%; background: #EAEAEA; padding: 20px; box-sizing: border-box;
        .content{ width: 1000px; margin: 0px auto; background: #ffffff; border-radius: 3px; box-shadow: 0 0 10px 10px #cccccc; padding-bottom: 20px;  box-sizing: border-box;
            .el-input{ width: 400px;}
            .bt{ font-size: 20px; border-bottom: 1px #EAEAEA solid; padding: 20px; font-weight: bold; font-family: "Microsoft JhengHei"; margin-bottom: 20px;}
            .flex{ display: flex}
            .canshu{ width: 600px;}
            .kuandu{ width: 100%; box-sizing: border-box;}

        }
        #editor{ width: 880px;

        }
        .go{ margin-left: 80px;}

    }
</style>
